<template>
  <div>
    <!-- 在Vue中 只需定义好动画在指定好进入、离开时的类名 给需要做动画的标签包裹<transition>标签即会自动执行该动画 -->
    <!-- 注意: transition标签跟template标签一样 不会渲染至真实Dom -->
    <!-- appear属性为真 则会在Dom加载完毕时,立即执行一次进入动画 -->
    <transition name="hell" appear>
      <h1 class="hell" v-show="Show" >你好</h1>
    </transition>


    <button @click="Show = !Show">点我</button>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      Show: "true",
    };
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
}

/* 进入.v-enter-active (页面做动画的标签不止一个时 可把 v 替换为 自定义类名 Vue执行时会避免冲突)  */
.hell-enter-active {
  animation: dh 1s linear;
}
/* 离开.v-levae-active */
.hell-leave-active {
  animation: dh 1s reverse;
}
/* 定义动画 */
@keyframes dh {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>